<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/3
  Time: 19:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>秒杀时段列表</title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables.min.css"
          rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables-custom.css"
          rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]-->
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
    <!--[endif]-->

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .el-card__body {
            padding: 20px;
            background-color: white;
            font-size: 14px;
            border: solid 1px rgba(0,0,0,0.2);
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }


        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }


        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .table-responsive {
            min-height: .01%;
            overflow-x: auto;
        }


        /*窗口*/
        .window {
            padding-top: 20px;
            padding-bottom: 50px;
            border-radius: 2px;
            box-shadow: 0 0 3px grey;
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 150px;
            display: none;
            z-index: 10;
        }
        @media (max-width: 992px) {
            .window form .form-control{
                margin-bottom: 20px;
            }
        }
        @media (min-width: 992px) {
            .window form .opt{
                text-align: right;
            }
        }

        /*中间层*/
        .not-active {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .5);
            z-index: 5;
        }

        #shade {
            display: none;
        }

        /*关闭弹窗按钮*/
        .window #close-window {
            border: 0;
            outline: none;
            background-color: #fff;
        }

        .window #close-window .btn:hover {
            color: deepskyblue;
        }

        .btn-default {
            border: 0;
            outline: 0;
            background-color: #fff;
            color: rgb(14, 144, 210);
        }

        .btn-default:hover, .btn-default:focus, .btn-default:active:focus, .btn-default:after {
            color: rgb(14, 144, 210);
            background-color: #fff;
        }

        .btn:focus, .btn:active:focus {
            outline: none;
            box-shadow: none;
        }

        .pagination > li > button {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #eee;
        }

        .pagination > .disabled > button, .pagination > .disabled > button:focus, .pagination > .disabled > button:hover {
            color: #777;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #eee
        }
    </style>

</head>

<body class="sticky-header">

<!--Start left side Menu-->
<jsp:include page="../inc/left.jsp"/>
<!--End left side menu-->


<!-- main content start-->
<div class="main-content">

    <!-- header section start-->
    <jsp:include page="../inc/header.jsp"/>
    <!-- header section end-->

    <div class="wrapper" style="background-color:rgb(238, 238, 238);">

        <!--Start Page Title-->
        <div class="page-title-box">
            <p class="page-title" style="color: black">秒杀时段列表</p>
            <ol class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">营销</a>
                </li>
                <li class="active">
                    秒杀时段列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <div class="el-card__body col-sm-12">
            <i class="fa fa-file-text-o" aria-hidden="true"></i>
            <span style="font-size: 16px;">数据列表</span>
            <div style="float: right">
                <button id="btn-add" type="button" class="btn btn-info"
                        style="margin-right: 20px;">
                    <span>添加</span>
                </button>
            </div>
        </div>


        <%--Start 弹窗 --%>
        <div id="shade" class="not-active"></div>
        <div class="window row col-sm-5 col-sm-offset-4 col-md-5 col-md-offset-4 col-lg-5 col-lg-offset-4">
            <div class="col-lg-4 col-md-4 col-sm-4" style="margin-bottom: 20px">
                <h4>编辑时间段</h4>
            </div>
            <button id="close-window" class="btn btn-default col-lg-1 col-lg-offset-7 col-md-1 col-md-o7 col-sm-1 col-sm-offset-7">
                <i class="ion-close"></i>
            </button>
            <div class="col-sm-12 col-md-12 col-lg-10 col-lg-offset-1">
                <form action="${pageContext.request.contextPath}/sell/flashPromotionSession/save" method="post"
                      class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-11">
                        <div class="col-sm-12 col-md-12 col-lg-12" style="display: none">
                            <div class="opt col-sm-12 col-md-4 col-lg-4">
                                <label for="id">ID：</label>
                            </div>
                            <div class="col-sm-12 col-md-8 col-lg-8">
                                <input id="id" name="id" class="form-control">
                            </div>
                        </div>

                        <div class="opt col-sm-12 col-md-4 col-lg-4">
                            <label for="title">秒杀时间段名：</label>
                        </div>
                        <div class="col-sm-12 col-md-8 col-lg-8">
                            <input id="title" name="name" class="form-control" required>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="opt col-sm-12 col-md-4 col-lg-4">
                            <label for="start">每日开始时间：</label>
                        </div>
                        <div class="col-sm-12 col-md-8 col-lg-8">
                            <input id="start" type="time" step="1" name="startTime" class="form-control" required>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="opt col-sm-12 col-md-4 col-lg-4">
                            <label for="end" class="text-right">每日结束时间：</label>
                        </div>
                        <div class="col-sm-12 col-md-8 col-lg-8">
                            <input id="end" type="time" step="1" name="endTime" class="form-control" required>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="opt col-sm-12 col-md-4 col-lg-4">
                            <label for="status">是否启用：</label>
                        </div>
                        <div class="col-sm-12 col-md-8 col-lg-8">
                            <section id="status" style="margin-bottom: 20px">
                                <input id="on" type="radio" value="1" name="status"> 启用 &emsp;&emsp;&emsp;
                                <input id="off" type="radio" value="0" name="status"> 不启用
                            </section>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="col-sm-1 col-sm-offset-2 col-md-1 col-md-offset-3">
                            <input type="submit" value="确认" class="btn btn-success">
                        </div>
                        <div class="col-sm-1 col-sm-offset-2 col-md-1 col-md-offset-2">
                            <button id="reset-edit" type="button" class="btn btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <%--End 弹窗 --%>


        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box" style="border: solid 1px rgba(0,0,0,0.2); margin-top: 15px">
                    <br>
                    <div class="table-responsive">
                        <div id="example_wrapper" class="dataTables_wrapper">
                            <table id="example" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th class="text-center">编号</th>
                                    <th class="text-center">秒杀时段名称</th>
                                    <th class="text-center">每日开始时间</th>
                                    <th class="text-center">每日结束时间</th>
                                    <th class="text-center">启用</th>
                                    <th class="text-center">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                <c:forEach items="${flashPromotionSessions}" var="fps">
                                    <tr>
                                        <td class="text-center">${fps.id}</td>
                                        <td class="text-center">${fps.name}</td>
                                        <td class="text-center">
                                            <fmt:formatDate value="${fps.startTime}" pattern="HH:mm:ss"/>
                                        </td>

                                        <td class="text-center">
                                            <fmt:formatDate value="${fps.endTime}" pattern="HH:mm:ss"/>
                                        </td>
                                        <td class="text-center">
                                            <button id="status-${fps.id}" class="btn btn-default" onclick="change(${fps.id})">
                                                <i class="fa fa-2x fa-toggle-${fps.status==1?'on':'off'}"></i>
                                            </button>
                                        </td>
                                        <td class="handle text-center">
                                            <button id="btn-update" class="btn btn-info"
                                                    onclick="update(${fps.id})">编辑
                                            </button>
                                            <button id="btn-delete" class="btn btn-danger"
                                                    onclick="del(${fps.id})">删除
                                            </button>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End row-->
    </div>

    <!--Start  Footer -->
    <%@include file="../inc/footer.jsp" %>
    <!--End footer -->

</div>
<!--End main content -->


<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<%--<script src="${pageContext.request.contextPath}/assets/plugins/datatables/js/jquery.dataTables.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/assets/pages/table-data.js"></script>
<!--End Page Level Plugin-->

<script>
    // 状态修改
    function change(id) {
        $.ajax({
            type: 'post',
            url: '${pageContext.request.contextPath}/sell/flashPromotionSession/change',
            data: {id: id},
            success: function (response) {
                if (response.status == 1) {
                    $("#status-"+response.id).html('<i class="fa fa-2x fa-toggle-on"></i>')
                }else {
                    $("#status-"+response.id).html('<i class="fa fa-2x fa-toggle-off"></i>')
                }
            }
        })
    }

    // 添加新秒杀时段时
    $("#btn-add").click(function () {
        openWindow();
        $("#id").val(null);
        $("#start").val(null);
        $("#end").val(null);
        $("#title").val(null);
        $("#on").prop("checked", "checked");
    });

    // 修改秒杀时段时回显
    function update(id) {
        openWindow()
        $.ajax({
            type: 'get',
            url: '${pageContext.request.contextPath}/sell/flashPromotionSession/queryById/' + id,
            success: function (response) {
                // console.info(response.data)
                $("#id").val(response.data.id);
                $("#title").val(response.data.name);
                $("#start").val(timeFormat(response.data.startTime));
                $("#end").val(timeFormat(response.data.endTime));
                if (response.data.status == 1) {
                    $("#on").prop("checked", "checked");
                } else {
                    $("#off").prop("checked", "checked");
                }
            }
        })
    }

    // 删除确认
    function del(id) {
        let sure = confirm("确定删除吗？");
        if (sure) {
            location.href = "${pageContext.request.contextPath}/sell/flashPromotionSession/delete/" + id;
        }
    }

    // 时间格式化
    function timeFormat(time) {
        let hours = new Date(time).getHours();
        let minutes = new Date(time).getMinutes();
        let seconds = new Date(time).getSeconds();
        if (hours < 10) {
            hours = '0' + hours;
        }
        if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 10) {
            seconds = '0' + seconds;
        }
        return hours + ":" + minutes + ":" + seconds;
    }

    // 弹出表单输入窗口
    function openWindow() {
        $("#shade").fadeIn(300);
        $(".window").fadeIn(300);
    }

    // 关闭窗口
    $("#close-window").click(function () {
        $(".window").fadeOut(100);
        $("#shade").fadeOut(100);
    })

    // 重置编辑表单
    $("#reset-edit").click(function () {
        $("#start").val("");
        $("#end").val("");
        $("#title").val("");
        $("#on").prop("checked", "checked");
    })

</script>
</body>

</html>


